<template>
  <div class="layout">
    <!--无/layout-->
    <!-- <ul style="bottom: 100px">
      <li><router-link to="/home">面经</router-link></li>
      <li><router-link to="/collect">收藏</router-link></li>
      <li><router-link to="/like">喜欢</router-link></li>
      <li><router-link to="/my">我的</router-link></li>
    </ul> -->
    <!--有/layout-->
    <div class="box">
      <router-view></router-view>
    </div>
    <ul>
      <li><router-link to="/layout/home">面经</router-link></li>
      <li><router-link to="/layout/collect">收藏</router-link></li>
      <li><router-link to="/layout/like">喜欢</router-link></li>
      <li><router-link to="/layout/my">我的</router-link></li>
    </ul>
    <!--layout中,给二级路由设置路由出口===路由坑位-->
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
// .box {
//   display: flex;
//   padding-bottom: 50px;
// }

// ul {
//   width: 100%;
//   background-color: #fff;
//   position: fixed;
//   left: 0;
//   bottom: 0;
//   display: flex;
//   height: 50px;
//   justify-content: space-around;
//   line-height: 50px;
//   a {
//     text-decoration: none;
//     color: #495052;
//   }
// }
.layout {
  background-color: #f4f5f5;
  padding: 0 10px;
  display: flex;
  height: 100vh;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  .box {
    flex: 1;
    overflow: auto;
  }
  ul {
    height: 50px;
    background-color: #fff;
    display: flex;
    width: 100%;
    li {
      margin: 10px 0;
      flex: 1;
      text-align: center;
      a {
        color: #91867c;
        text-decoration: none;
      }
    }
  }
}
</style>
